<template>
  <div class="shopsList">

    <div class="content">
      <el-row>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>店铺列表</el-breadcrumb-item>

        </el-breadcrumb>

      </el-row>
      <el-row :gutter="12">
        <!--todo 统一搜索位置-->



        <el-col :span="16">
          <el-input
            size="small"
            placeholder="输入关键词"
            v-model="vm.query.keyword"
            prefix-icon="el-icon-search"
            @change="query({reload:true})"
            class="input-with-select">
            <el-button
              size="small"

              @click="vm.query.keyword='',query({reload:true})"
              slot="append"
            >清除
            </el-button>

          </el-input>
        </el-col>


      </el-row>
      <!--todo row-class-name 单独操作总店 bug :doLayout	对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法-->
      <el-table
        :data="vm.models"
        stripe
        border style="width: 100%">


        <el-table-column

          prop="id"
          label="#"
          width="60">
        </el-table-column>

        <el-table-column

          prop="logo"
          label="店标"
          width="">
          <template slot-scope="scope">
            <span><img width="60px" :src="scope.row.avatar" alt=""> </span>

          </template>
        </el-table-column>
        <el-table-column

          prop="shop_name"
          label="店铺名"
          width="">
        </el-table-column>
        <el-table-column

          prop="city"
          label="城市"
          width="">

        </el-table-column>
        <el-table-column

          prop="create_time"
          label="申请时间"
          width="">

        </el-table-column>
        <el-table-column


          label="店长姓名"
          width="">
          <template slot-scope="scope">
            <el-button
              type="text"
              v-if='scope.row.name'
              @click="queryTag(scope.row.name)"
              size="small"

            >{{ scope.row.name}}
            </el-button>


          </template>
        </el-table-column>
        <el-table-column
          label="电话"
          width="">
          <template slot-scope="scope">
            <el-button
              type="text"
              v-if='scope.row.phone'
              @click="queryTag(scope.row.phone)"
              size="small"

            >{{ scope.row.phone}}
            </el-button>
          </template>
        </el-table-column>




        <el-table-column
          align="right"
          label="操作"
          >
          <template slot-scope="scope" v-if="!scope.row.is_head_shop">
            <router-link :to="{ name:'shopsEdit',query:{audit:1},params: { id: scope.row.id }}" append>
              <el-button v-if="scope.row.status=='wait'" type="success" size="mini">
                审核
              </el-button>
            </router-link>



          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        v-if="!vm.isLoading"
        @size-change="sizeChange($event)"
        @current-change="pageChange($event)"
        :page-size="vm.meta.size"
        :page-sizes="[10,20,30,50,100,1000]"
        :current-page="vm.meta.page"
        layout="total,sizes,prev, pager, next,jumper"
        :total="vm.meta.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
//  todo 增加路由的参数,配置html5Mode ,导航方法封装
import Vue from "vue";
import * as Models from "@/api/shops";
import pages from "@/mixins/pages";

export default {
  computed: {},
  mixins: [pages],
  components: {
    //      Stores,
  },
  data() {
    return {
      vm: {
        models: [],
        isNull: false,
        isLoading: false,
        isError: false,
        meta: {},
        query: {},

      },
      queryConfig: {
        child: 'applies'
      },
      Models
    };
  },

  beforeRouteUpdate(to, from, next) {
    this.vm.query.status = to.query.status;
    this.query({reload: true});
    next();
  },
  mounted() {
    this.vm.query.status = this.$route.query.status;
    this.query({ reload: true });

  },
  methods: {

  }
};
</script>
